<template>
    <div class="boxx">
        <HeaderIndex title="选择购票人">
        </HeaderIndex>
        <div class="main">
            <div class="add" @click="add()">
                <span class="blueadd"></span>
                <span>添加购票人</span>
            </div>
            <!-- <div class="logo"></div> -->
            <!-- <div class="text">
                <div> 您需要添加观影人才可以继续购票哦</div>
               
            </div> -->
            <div class="list">
                <div class="customer-item" v-for="(v,i) in arr" :key="i">
                    <span class="customer-num-label">观影人1</span>
                    <!-- <span class="delete-btn" data-id="56688" data-isbind="true">删除</span> -->
                    <span class="select-icon selected" data-id="56688"></span>
                    <div class="info">
                        <span class="label">真实姓名</span>
                        <span>{{v.realNm}}</span>
                    </div>
                    <div class="info">
                         <span class="label">证件类型</span>
                        <span>{{v.realIdType}}</span>
                    </div>
                    <div class="info">
                        <label class="label">证件号</label>
                        <span>{{v.realId}}</span>
                    </div>
                    
                    </div>
                            </div>



            <div class="footer">
                <div class="button">提&nbsp;&nbsp;交</div>
            </div>

        </div>
        
    </div>
</template>

<script>
import getLink from "@/api/getLink.js";

export default {
    data() {
        return {
            arr:[]
        }
    },
    mounted() {
    getLink("/apidl/realname").then((res) => {
      this.arr = res.data;
      
    });
  },
  methods: {
    add() {
      this.$router.push("/realname1");
    }
  }
};
</script>

<style scoped>
.boxx {
  background-color: #f6f6f6;
}
.add {
  width: 90%;
  height: 1.5rem;
  background-color: #fff;
  color: rgb(36, 133, 224);
  margin: 0 auto;
  border-radius: 0.1rem;
  margin-top: 0.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-size: 0.36rem;
  font-weight: 900;
  /* border: 1px solid black */
}
.logo {
  background: url("../../../public/images/addwatchman.png") no-repeat;
  background-size: 100%;
  width: 2rem;
  height: 1.66rem;

  margin: 0 auto;
  margin-top: 2rem;
}

.text div {
  margin-top: 0.4rem;
  text-align: center;
  color: rgb(165, 165, 165);
}
.footer {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 1.2rem;
}
.button {
  width: 90%;
  height: 70%;
  background-color: rgb(248, 158, 155);
  margin: 0 auto;
  margin-top: 0.16rem;
  color: white;
  text-align: center;
  line-height: 0.84rem;
  border-radius: 1rem;
  font-size: 0.36rem;
}
.blueadd {
  width: 0.3rem;
  height: 0.3rem;
  vertical-align: -0.04rem;
  margin-right: 0.1rem;
  display: inline-block;
  background: url("../../../public/images/blueadd.png") no-repeat;
  background-size: 0.3rem, 0.3rem;
}
.list {
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
  /* -webkit-user-select: none; */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
  color: #777;
  -webkit-tap-highlight-color: transparent;
  padding: 0 15px 80px;
}
.customer-item{
        font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    /* -webkit-user-select: none; */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-size: 14px;
    color: #777;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 35px 15px 5px;
    margin-bottom: 15px;
    cursor: pointer;
}
.customer-num-label{
        /* -webkit-user-select: none; */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background: url(/bs/file/?f=myfe/canary:static/deploy/dpmmweb/client/static/src/images/realname/label.png) no-repeat;
    display: inline-block;
    width: 74px;
    height: 23px;
    background-size: 74px;
    position: absolute;
    left: -1px;
    top: -1px;
    color: #fff;
    padding-left: 6px;
    box-sizing: border-box;
    font-family: PingFang-SC-Bold;
    font-size: 13px;
    line-height: 22px;
}
.info{
        font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    /* -webkit-user-select: none; */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 13px;
    color: #424242;
    font-size: 14px;
    line-height: 20px;
}
.label{
        /* -webkit-user-select: none; */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    font-family: PingFangSC-Medium;
    min-width: 76px;
    display: inline-block;
}
.info span{
        font-family: PingFangSC-Regular,Hiragino Sans GB,sans-serif;
    /* -webkit-user-select: none; */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: #424242;
    font-size: 14px;
    line-height: 20px;
}
</style>
